﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Dropdown
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.DropdownsModel
@{
    ViewData["Title"] = "Dropdowns";
}


<h2>Dropdowns</h2>

<p>Based on <a href="@BootstrapUrlHelper.GetDocUrl("components/dropdowns")" target="_blank"> Bootstrap button</a>.</p>

<h4>Single button</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-dropdown>
            <abp-dropdown-button text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button text=&quot;Dropdown button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;demo-area&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
       &lt;button class=&quot;dropdown-toggle btn&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
      &lt;div class=&quot;dropdown-menu&quot;&gt;
         &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-dropdown>
            <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; link=&quot;true&quot; text=&quot;Dropdown button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
    &lt;a class=&quot;dropdown-toggle btn btn-secondary&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; data-busy-text=&quot;Processing...&quot; roles=&quot;button&quot; href=&quot;#&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/a&gt;
    &lt;div class=&quot;dropdown-menu&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
       &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-dropdown>
            <abp-dropdown-button button-type="Success" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Outline_Success" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Danger" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Outline_Danger" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;!-- Example single danger button --&gt;

&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Danger&quot; text=&quot;Dropdown button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-divider /&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;!-- Example single danger button --&gt;

&lt;div class=&quot;btn-group&quot;&gt;
    &lt;button class=&quot;dropdown-toggle btn btn-danger&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
    &lt;div class=&quot;dropdown-menu&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Split button</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-dropdown>
            <abp-dropdown-button button-type="Outline_Warning" dropdown-style="Split" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Warning" dropdown-style="Split" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Primary" dropdown-style="Split" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;!-- Example single danger button --&gt;

&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Danger&quot; dropdown-style=&quot;Split&quot; text=&quot;Dropdown button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-divider /&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;!-- Example single danger button --&gt;

&lt;div class=&quot;btn-group&quot;&gt;
     &lt;button class=&quot;btn btn-danger&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown button&lt;/span&gt;&lt;/button&gt;
     &lt;button data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-danger&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
     &lt;div class=&quot;dropdown-menu&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Split button</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-dropdown>
            <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown>
            <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;!-- Example single danger button --&gt;

&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Large split button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Small split button&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;!-- Large button groups (default and split) --&gt;
        &lt;div class=&quot;btn-group&quot;&gt;
            &lt;button class=&quot;dropdown-toggle btn btn-secondary btn-lg&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Large button&lt;/span&gt;&lt;/button&gt;
            &lt;div class=&quot;dropdown-menu&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;btn-group&quot;&gt;
            &lt;button class=&quot;btn btn-secondary btn-lg&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Large split button&lt;/span&gt;&lt;/button&gt;
            &lt;button data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-secondary btn-lg&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
            &lt;div class=&quot;dropdown-menu&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;btn-group&quot;&gt;
            &lt;button class=&quot;dropdown-toggle btn btn-secondary btn-sm&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Small button&lt;/span&gt;&lt;/button&gt;
            &lt;div class=&quot;dropdown-menu&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;btn-group&quot;&gt;
            &lt;button class=&quot;btn btn-secondary btn-sm&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Small split button&lt;/span&gt;&lt;/button&gt;
            &lt;button data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; class=&quot;dropdown-toggle dropdown-toggle-split btn btn-secondary btn-sm&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;/button&gt;
            &lt;div class=&quot;dropdown-menu&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
                &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Directions</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dropdown direction="Up">
            <abp-dropdown-button button-type="Secondary" text="Dropup" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown direction="Right">
            <abp-dropdown-button button-type="Secondary" text="dropright" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
        <abp-dropdown direction="Right">
            <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
            <abp-dropdown-menu>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item href="#">Another action</abp-dropdown-item>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown direction=&quot;Up&quot;&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropup&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown direction=&quot;Right&quot;&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;dropright&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown direction=&quot;Right&quot;&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Split right&quot; /&gt;
    &lt;abp-dropdown-menu&gt;
        ...
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group dropup&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
    Dropup
  &lt;/button&gt;
  &lt;div class=&quot;dropdown-menu&quot;&gt;
    &lt;!-- Dropdown menu links --&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group dropright&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
    dropright
  &lt;/button&gt;
  &lt;div class=&quot;dropdown-menu&quot;&gt;
    &lt;!-- Dropdown menu links --&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group dropright&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Split right&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class=&quot;dropdown-menu&quot;&gt;
    &lt;!-- Dropdown menu links --&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Menu Items</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dropdown>
            <abp-dropdown-button button-type="Secondary" text="Dropdown" />
            <abp-dropdown-menu>
                <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
                <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
                <abp-dropdown-divider />
                <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot;/&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-header&gt;Dropdown Header&lt;/abp-dropdown-header&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-divider/&gt;
        &lt;abp-dropdown-item-text&gt;Dropdown Item Text&lt;/abp-dropdown-item-text&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;dropdown&quot;&gt;
  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
    Dropdown button
  &lt;/button&gt;
  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
      &lt;h6 class=&quot;dropdown-header&quot;&gt;Dropdown Header&lt;/h6&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
      &lt;a class=&quot;dropdown-item active&quot; href=&quot;#&quot;&gt;Active action&lt;/a&gt;
      &lt;a class=&quot;dropdown-item disabled&quot; href=&quot;#&quot;&gt;Disabled action&lt;/a&gt;
      &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
      &lt;span class=&quot;dropdown-item-text&quot;&gt;Dropdown item text&lt;/span&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Menu alignment</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dropdown>
            <abp-dropdown-button button-type="Secondary" text="Right-aligned" />
            <abp-dropdown-menu align="End">
                <abp-dropdown-item href="#">Action</abp-dropdown-item>
                <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
                <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Right-aligned&quot;/&gt;
    &lt;abp-dropdown-menu align=&quot;Right&quot;&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;dropdown-toggle btn btn-secondary&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Right-aligned&lt;/span&gt;&lt;/button&gt;
    &lt;div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;dropdown-menu dropdown-menu-end&quot; x-placement=&quot;bottom-end&quot; style=&quot;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(135px, 38px, 0px);&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item active&quot;&gt;Active action&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item disabled&quot;&gt;Disabled action&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Custom Content</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dropdown>
            <abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
            <abp-dropdown-menu class="p-4" style="max-width: 200px;">
                <p>
                    Some example text that's free-flowing within the dropdown menu.
                </p>
                <p class="mb-0">
                    And this is more example text.
                </p>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-dropdown&gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Only Text&quot; /&gt;
    &lt;abp-dropdown-menu class=&quot;p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
        &lt;p&gt;
             Some example text that&apos;s free-flowing within the dropdown menu.
        &lt;/p&gt;
        &lt;p class=&quot;mb-0&quot;&gt;
             And this is more example text.
        &lt;/p&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
    Dropdown With Only Text
  &lt;/button&gt;
    &lt;div class=&quot;dropdown-menu p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
      &lt;p&gt;
        Some example text that&apos;s free-flowing within the dropdown menu.
      &lt;/p&gt;
      &lt;p class=&quot;mb-0&quot;&gt;
        And this is more example text.
      &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-dropdown >
            <abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
            <abp-dropdown-menu>
                <form class="px-4 py-3">
                    <abp-input asp-for="EmailAddress"></abp-input>
                    <abp-input asp-for="Password"></abp-input>
                    <abp-input asp-for="RememberMe"></abp-input>
                    <abp-button button-type="Primary" text="Sign In" type="submit" />
                </form>
                <abp-dropdown-divider></abp-dropdown-divider>
                <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
                <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
            </abp-dropdown-menu>
        </abp-dropdown>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Model Class">
                <pre><code>
    public class DropdownsModel : PageModel
    {
        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email Address")]
        public string EmailAddress { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password{ get; set; }

        [Display(Name = "Remember Me")]
        public bool RememberMe{ get; set; }


        public void OnGet()
        {

        }
    }
</code></pre>
            </abp-tab>
            <abp-tab title="Tag Helper" active="true">
                <pre><code>
&lt;abp-dropdown &gt;
    &lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Form&quot;/&gt;
    &lt;abp-dropdown-menu&gt;
        &lt;form class=&quot;px-4 py-3&quot;&gt;
            &lt;abp-input asp-for=&quot;EmailAddress&quot;&gt;&lt;/abp-input&gt;
            &lt;abp-input asp-for=&quot;Password&quot;&gt;&lt;/abp-input&gt;
            &lt;abp-input asp-for=&quot;RememberMe&quot;&gt;&lt;/abp-input&gt;
            &lt;abp-button button-type=&quot;Primary&quot; text=&quot;Sign In&quot; type=&quot;submit&quot; /&gt;
        &lt;/form&gt;
        &lt;abp-dropdown-divider&gt;&lt;/abp-dropdown-divider&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;New around here? Sign up&lt;/abp-dropdown-item&gt;
        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Forgot password?&lt;/abp-dropdown-item&gt;
    &lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
    &lt;button class=&quot;dropdown-toggle btn btn-secondary&quot; data-bs-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown With Form&lt;/span&gt;&lt;/button&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div class=&quot;dropdown-menu&quot; x-placement=&quot;bottom-start&quot; style=&quot;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);&quot;&gt;
        &lt;form class=&quot;px-4 py-3&quot; novalidate=&quot;novalidate&quot;&gt;
            &lt;div class=&quot;mb-3&quot;&gt;
                &lt;label for=&quot;EmailAddress&quot;&gt;Email Address&lt;/label&gt;
                &lt;input type=&quot;email&quot; data-val=&quot;true&quot; data-val-required=&quot;The Email Address field is required.&quot; id=&quot;EmailAddress&quot; name=&quot;EmailAddress&quot; value=&quot;&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;EmailAddress-error&quot;&gt;
                &lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;EmailAddress-error&quot; class=&quot;&quot;&gt;The Email Address field is required.&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;mb-3&quot;&gt;
                &lt;label for=&quot;Password&quot;&gt;Password&lt;/label&gt;
                &lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;Password&quot; name=&quot;Password&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;Password-error&quot;&gt;
                &lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;Password-error&quot; class=&quot;&quot;&gt;The Password field is required.&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;mb-3 form-check&quot;&gt;
                &lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The Remember Me field is required.&quot; id=&quot;RememberMe&quot; name=&quot;RememberMe&quot; value=&quot;true&quot; class=&quot;form-check-input valid&quot; aria-describedby=&quot;RememberMe-error&quot;&gt;
                &lt;label class=&quot;form-check-label&quot; for=&quot;RememberMe&quot;&gt;Remember Me&lt;/label&gt;
            &lt;/div&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Sign In&lt;/span&gt;&lt;/button&gt;
            &lt;input name=&quot;RememberMe&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
        &lt;/form&gt;
        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;New around here? Sign up&lt;/a&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Forgot password?&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<hr />

@await Component.InvokeAsync("TagHelperProperties", typeof(AbpDropdownTagHelper))